<template>
	<div>
		<div class="flex-start-center">
			<div
				v-for="(item, index) in dataList"
				:key="index"
				class="card-wrapper"
			>
				<div class="card">
					<div
						v-for="field in fields"
						:key="field.label"
						class="info-row"
					>
						<span class="item-label">{{ field.label }}</span>
						<span class="item-val">
							{{ formatValue(item, field) }}
						</span>
					</div>
				</div>
			</div>
		</div>

		<save-dialog
			:data-item="dataItem"
			:dialog-state="saveDialogState"
			@on-visible-change="onVisibleChange"
			@on-confirm="onConfirmBtn"
		/>
	</div>
</template>

<script>
    import saveDialog from '../save-dialog';

    export default {
        props: {
            dataList: {
                type: Array,
                default: () => []
            }
        },
        components: {
            saveDialog
        },
        data() {
            return {
                saveDialogState: false,
                dataItem: {},
                fields: [
                    { label: '计划品种:', key: 'productName' },
                    { label: '采集品种:', key: 'collectProductName' },
                    { label: '停机类型:', key: 'typeName' },
                    {
                        label: '本落纱纺纱时间:',
                        key: 'startDateTime',
                        custom: item =>
                            item.startDateTime
                                ? `${this.filterTime(item.startDateTime)} ~ ${this.filterTime(item.endDateTime)}`
                                : '--'
                    },
                    { label: '纺纱时长(分):', key: 'timeMinute' },
                    {
                        label: '本落纱落纱时间:',
                        key: 'doffStartDateTime',
                        custom: item =>
                            item.doffStartDateTime
                                ? `${this.filterTime(item.doffStartDateTime)} ~ ${this.filterTime(item.doffEndDateTime)}`
                                : '--'
                    },
                    { label: '落纱时长(分):', key: 'doffMinute' },
                    {
                        label: '落纱次序:',
                        key: 'machineIdx',
                        custom: item => `第${item.machineIdx || 0}次`
                    }
                ]
            };
        },
        methods: {
            onConfirmBtn() {
                this.$emit('on-confirm');
            },
            filterTime(e) {
                return e ? e.split(' ')[1] : '';
            },
            formatValue(item, field) {
                if (field.custom) return field.custom(item);
                return item[field.key] || '--';
            },
            onVisibleChange(e) {
                this.saveDialogState = e;
            }
        }
    };
</script>

<style scoped lang="scss">
.card-wrapper {
  padding: 0 2px;
  width: 260px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  padding: 4px 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.info-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  line-height: 16px;
  margin-bottom: 4px;
}

.item-label {
  width: 90px;
  color: #808695;
  margin-right: 3px;
  flex-shrink: 0;
}

.item-val {
  color: #515a6e;
}
</style>

